<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisible"
            :width="width"
            :title="title"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            v-dialogDrag
            class="dialog-main"
            :modal='false'
            >
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="formName" label-width="80px" class="demo-ruleForm" size="mini" slot="center">
                    <el-form-item label="id:" prop="id"> 
                        <el-input v-model="ruleForm.id" size="mini" :disabled="disableEdit" @change="changeID" ></el-input>
                    </el-form-item>
                    <el-form-item label="选项名称:" prop="name"> 
                        <el-input v-model="ruleForm.name" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="备注:" prop="note"> 
                        <el-input v-model="ruleForm.note" size="mini" type="textarea" rows="3"></el-input>
                    </el-form-item>
                    <el-form-item label="排序:" prop="sortIndex" v-if="computedDeatil"> 
                        <el-input v-model.number="ruleForm.sortIndex" size="mini"></el-input>
                        <div>
                            按照从低到高的循序排序
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="successDing('formName')" size="mini" type="primary">确 定</el-button>
                <el-button @click="closeCommonDialog()" size="mini">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { saveSelectList,getConfigSelectListById  } from '@/api/user.js'
import { trim } from '@/utils/tools.js';
export default {
    name:'addConfigItemDialog',
    data(){
        return {
            title:null,
            dialogVisible: false,
            disableEdit: false,
            ruleForm:{},
            rules:{
                id: [
                    { required: true, message: this.M2('请填写id！'), trigger: 'blur' },
                ],
                name: [
                    { required: true, message: this.M2('请填写选项名称！'), trigger: 'blur' },
                ],
                sortIndex: [
                    {
                        required: true,
                        validator: (rules, value, cb) => {
                            if (!Number.isInteger(value)) {
                                return cb(new Error(this.M2("请输入数字值!")));
                            }
                            return cb();
                        },
                        trigger: "blur"
                    }
                ],
            },
        }
    },
    props:{
        titleText:{
            type:String,
            default:() => ('')
        },
        width:{
            type:String,
            default:() => ('40%')
        },
    },
     computed:{
        computedDeatil(){
            if(this.$route.query.id  != '-1' && this.$route.name != 'configurationItem'){
                return true
            }else {
                return false
            }
        }
    },
    methods:{
        changeID(val){
            if(!val) return
            let param = {
                id:trim(val),
                pid:this.$route.query.id ? this.$route.query.id : '-1'
            }
            getConfigSelectListById (param).then(res => {
                if(res.data){
                    this.$confirm((`已有数据是否要修改？`), { 
                        confirmButtonText: this.M2('确定'),
                        cancelButtonText: this.M2('取消'),
                        type: 'warning'
                    }).then(() => {
                        this.$set(this.ruleForm,'id',res.data.id)
                        this.$set(this.ruleForm,'name',res.data.name)
                        this.$set(this.ruleForm,'note',res.data.note)
                        this.$set(this.ruleForm,'sortIndex',res.data.sortIndex)
                    }).catch(() => {
                        this.$set(this.ruleForm,'id',null)
                        return
                    })
                }
            })
        },
        successDing(formName){
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let param = {
                    id:trim(this.ruleForm.id),
                    name:this.ruleForm.name,
                    pid:this.$route.query.id ? this.$route.query.id : '-1',
                    "note": this.ruleForm.note,//备注
                    "sortIndex": this.ruleForm.sortIndex,//备注//排序 数字
                }
                saveSelectList(param).then(res => {
                if(res.code == 200){
                    this.closeCommonDialog()
                    this.$message({
                        showClose: true,
                        message:'操作成功！',
                        offset:220,
                        duration: 2000,
                        type: 'success'
                    })
                    this.$emit('mainListList')
                }
            })
             } else {
                return false;
            }
        });
        },
        openCommonDialog(row){
            this.disableEdit = false
            if(row){
                this.ruleForm = {
                    id:row.id,
                    name:row.name,
                    note:row.note,
                    sortIndex:row.sortIndex,
                }
                this.disableEdit = true 
            }else {
                this.$set(this.ruleForm,'id',null)
                this.$set(this.ruleForm,'name',null)
                this.$set(this.ruleForm,'note',null)
                this.$set(this.ruleForm,'sortIndex',null)
            }
            this.dialogVisible = true
        },
        closeCommonDialog(){
            this.$refs.formName.clearValidate()
            this.dialogVisible = false
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep.dialog-main{
    .el-dialog__header{
        border-bottom: 1px solid #ccc;
        padding: 10px !important;
        .el-dialog__title{
            font-weight: bold;
        }
    }
    .el-dialog__body{
        padding: 10px 20px 20px !important;
        overflow-y: auto;
    }
    
}
</style>